<template>
  <el-card shadow="hover">
    <el-table
      :data="permissionList"
      border
      row-key="id"
      :expand-row-keys="expandRowKeys"
    >
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="跳转权限值" prop="toCode"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <PermissionButton
            type="primary"
            :icon="Plus"
            size="small"
            :disabled="row.level === 4"
            permission="btn.Permission.add"
          ></PermissionButton>
          <el-button type="warning" :icon="Edit" size="small"></el-button>
          <el-button type="danger" :icon="Delete" size="small"></el-button
        ></template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { getPermissionListApi } from "@/api/acl/permission";
import { PermissionList } from "@/api/acl/models/permissionModels";

defineOptions({
  name: "Permission",
});

const permissionList = ref<PermissionList>([]);
const expandRowKeys = ref<string[]>([]);

onMounted(async () => {
  permissionList.value = (await getPermissionListApi()).children;
  expandRowKeys.value = [permissionList.value[0].id as string];
});
</script>

<style scoped lang="scss"></style>
